import React, { memo, useEffect } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { getNoticeDataAction } from "./store/actionCreators";

import { NoticeWrapper, NoticeTitle } from "./style";
import NoticeItem from "./notice-item";

export default memo(function Notice() {
  const { noticeData } = useSelector(
    (state) => ({
      noticeData: state.getIn(["notice", "noticeData"]),
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getNoticeDataAction());
  }, [dispatch]);
  return (
    <NoticeWrapper>
      <NoticeTitle>学校通知</NoticeTitle>
      {noticeData.map((item, index) => {
        return <NoticeItem data={item} key={item.id} />;
      })}
    </NoticeWrapper>
  );
});
